{extend name="layout/base" /}
<!-- 标题 -->
{block name="title"} 栏目设置 - {$column['column_name']}{/block}
<!-- CSS -->
{block name="css"}{/block}

<!-- 具体内容 -->
{block name="content"}
<h2 class="header-dividing">栏目设置 <small>{$column['column_name']}</small></h2>
<div class="navbar navbar-default navbar-content">
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="{:url('@admin/'.$column->module->module_path, $urlparam)}"> 
                    <i class="icon icon-double-angle-left"></i> 返回{$column['column_name']}
                </a>
            </li>
        </ul>
    </div>
</div>
<form class="form-horizontal" id="form-page-submit" method="post" action="{:url('@admin/wscolumn/update')}">
<input type="hidden" name="column_id" value="{$column['column_id']}">
<input type="hidden" name="backurl" value="{$backurl}">
<div class="panel">
    <div class="panel-body">
        <fieldset>
            <legend>栏目信息</legend>
            <div class="form-group">
                <label class="col-md-2 col-sm-2 required" for="site_home">标题</label>
                <div class="col-sm-6"><input type="text" class="form-control" placeholder="页面标题" name="column_title" value="{$column['column_title']}" required></div>
                <div class="col-sm-4 help-block with-errors">Title 页面标题</div>
            </div>
            <div class="form-group">
                <label class="col-md-2 col-sm-2" for="site_home">关键词</label>
                <div class="col-sm-6"><input type="text" class="form-control" placeholder="页面关键词" name="column_keywords" value="{$column['column_keywords']}"></div>
                <div class="col-sm-4 help-block with-errors">Keywords 页面优化</div>
            </div>
            <div class="form-group">
                <label class="col-md-2 col-sm-2" for="site_home">描述</label>
                <div class="col-sm-6"><textarea class="form-control" name="column_description" rows="3" placeholder="页面描述">{$column['column_description']}</textarea></div>
                <div class="col-sm-4 help-block with-errors">Description 页面优化</div>
            </div>
            <legend>图片列表</legend>
            <div class="form-group">
                <label class="col-md-2 col-sm-2" for="site_home">图片</label>
                <div class="col-sm-10">
                    <div class="panel mb0" id="upload-list">
                        <div class="panel-body">
                            {volist name="column['column_image']" id="vo" key="file_id"}
                                <div class="col-sm-3 col-xs-6 upload-list-item">
                                    <div class="card">
                                        <div class="media-wrapper">
                                            <img class="img-bg img-5x3" style="background-image:url({$vo['file_path']})">
                                        </div>
                                        <div class="card-input">
                                            <input type="text" class="form-control" name="column_image[{$file_id+100}][file_name]" value="{$vo['file_name']}">
                                        </div>
                                        <div class="card-content">
                                            <span class="pull-right">大小：<b>{$vo['file_size']}</b></span>后缀：<b>{$vo['file_ext']}</b>
                                        </div>
                                        <a class="card-delete btn btn-link btn-sm" data-file-path="{$vo['file_path']}"><i class="icon icon-trash"></i></a>
                                    </div>
                                    <input type="hidden" name="column_image[{$file_id+100}][file_path]" value="{$vo['file_path']}">
                                    <input type="hidden" name="column_image[{$file_id+100}][file_ext]" value="{$vo['file_ext']}">
                                    <input type="hidden" name="column_image[{$file_id+100}][file_size]" value="{$vo['file_size']}">
                                </div>
                            {/volist}
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-upload-file"> <i class="icon icon-picture"></i> 选择图片</a>
                        </div>
                    </div>
                </div>
            </div>
            <legend>页面内容</legend>
            <div class="form-group">
                <label class="col-md-2 col-sm-2" for="wsarticle_attr">内容</label>
                <div class="col-sm-10">
                    <script id="column_details" name="column_details" type="text/plain">{$column['column_details']|raw}</script>
                </div>
            </div>
        </fieldset>
        <hr class="mt0">
        <div class="text-center">
            <button type="submit" class="btn btn-primary btn-submit">保存信息</button>
            <a class="btn btn-default btn-submit" href="{:url('@admin/'.$column->module->module_path,'siteid='.$siteid.'&columnid='.$columnid)}">返回上一页</a>
        </div>
    </div>
</div>
</form>
{/block}


<!-- JS -->
{block name="js"}
    {load href="/static/lib/jquery/jquery.form.js"}
    {load href="/static/lib/jquery/jquery.tmpl.min.js"}
    {load href="/static/lib/validator/validator.min.js"}
    {load href="/static/lib/simpleupload/simpleUpload.min.js"}
    {load href="/static/lib/sortable/zui.sortable.min.js"}
    {load href="/static/ueditor/ueditor.config.js"}
    {load href="/static/ueditor/ueditor.all.min.js"}
    {load href="/static/ueditor/lang/zh-cn/zh-cn.js"}
{/block}
{block name="jscode"}
<script id="image_tpl" type="text/html"> 
    <div class="col-sm-3 col-xs-6 upload-list-item">
        <div class="card">
            <div class="media-wrapper">
                <img class="img-bg img-5x3" style="background-image:url(${file_path})">
            </div>
            <div class="card-input">
                <input type="text" class="form-control" name="column_image[${file_id}][file_name]" value="${file_name}">
            </div>
            <div class="card-content">
                <span class="pull-right">大小：<b>${file_size}</b></span>后缀：<b>${file_ext}</b>
            </div>
            <a class="card-delete" data-file-path="${file_path}"><i class="icon icon-trash"></i></a>
        </div>
        <input type="hidden" name="column_image[${file_id}][file_path]" value="${file_path}">
        <input type="hidden" name="column_image[${file_id}][file_ext]" value="${file_ext}">
        <input type="hidden" name="column_image[${file_id}][file_size]" value="${file_size}">
    </div>
</script>
<script type="text/javascript">
$(document).ready(function() {
    // tinymce 编辑器
    //tinymce.init(tinymce_default_options);
    var ue = UE.getEditor('column_details');
    
    // 文件上传
    var file_id = 0;
    $("#upload-list .btn-upload-file").click(function(event) {
        file_id = file_id + 1;
        var uploadList = $("#upload-list>.panel-body");
        var settings = { uploadUrl: "{:url('@admin/upload/image')}", multiple: true, limit: 10 };
        // 文件开始上传
        var startFunc = function(file) {sxj.loading();}
        // 文件上传成功后的回调函数
        var successFunc = function(response) {
            var data = response.data;
            if (response.code == 1) {
                data.file_id = file_id;
                sxj.msg_success(data['file_name'] + ' 上传成功');
                $("#image_tpl").tmpl(data).appendTo(uploadList);
            } else {
                sxj.msg_error(response.msg);
            }
        }
        // 调用上传插件
        sxj.upload(settings, successFunc, startFunc);
    });

    // 上传文件排序
    $('#upload-list').sortable({selector: '.upload-list-item'})
    $('#upload-list').on('click', '.form-control', function(e){
        sxj.stop_event(e);
    }).on('mousedown', '.form-control', function(e) {
        sxj.stop_event(e);
    }).on('click', '.card-delete', function(e) {
        // 删除文件
        var file_path = $(this).data('file-path');
        var card_item = $(this).parents('.upload-list-item');
        var url = "{:url('@admin/upload/delete')}?file_path="+file_path;
        // 删除文件 删除html
        sxj.upload_list_delete(url, card_item);
        sxj.stop_event(e);
        return false;
    });
});
</script>
{/block}